<template>
  <div class="home">
    <!--  标题-->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      destroy-on-close
      @close="close"
    >
      <div>
        <!--日期选择器-->
        <div class="datePicker">
          <el-date-picker
            :clearable="false"
            v-model="startDate"
            :picker-options="pickerOptionsStart"
            type="date"
            placeholder="选择日期"
            @change="datePickerChange($event, 'startDate')"
          >
          </el-date-picker>
          <div style="margin: 0 10px; cursor: default">至</div>
          <el-date-picker
            :clearable="false"
            v-model:value="endDate"
            :picker-options="pickerOptionsEnd"
            type="date"
            placeholder="选择日期"
            @change="datePickerChange($event, 'endDate')"
          >
          </el-date-picker>
        </div>
        <!--排行榜-->
        <div class="contentBox" v-loading="loading">
          <el-card class="box-card" v-for="(item, index) in list" :key="index">
            <div>
              <!--标题和活跃度-->
              <div class="item_title">
                <div class="branch_name">
                  <span>{{ item.branchName }}</span>
                </div>
                <div class="activeText" v-if="userType == 1">
                  学生日均活跃度：<span class="activeNum">{{
                    item.avgActiveOfBranch
                  }}</span>
                </div>
                <div class="activeText" v-if="userType == 2">
                  教师日均活跃度：<span class="activeNum">{{
                    item.avgActiveOfBranch
                  }}</span>
                </div>
              </div>
              <!--内容-->
              <div class="item_content">
                <!-- 图表-->
                <div class="item_l">
                  <div class="pieChart" :ref="`active_${index}`"></div>
                  <div class="chartsTip">
                    <div v-if="userType == 1">
                      日均活跃学生人数：{{ item.activeCount }}
                    </div>
                    <div v-if="userType == 2">
                      日均活跃教师人数：{{ item.activeCount }}
                    </div>
                    <!--                    <div>活跃课程数量：730</div>-->
                  </div>
                </div>
                <!--表格-->
                <div class="item_r">
                  <div class="tit_top">
                    <div v-if="userType == 1">活跃学生排行榜</div>
                    <div v-if="userType == 2">活跃教师排行榜</div>
                    <div class="lookmore" @click="lookDetail(item.branchId)">
                      查看详情 >
                    </div>
                  </div>
                  <div>
                    <el-table
                      :data="item.activeUserList"
                      style="width: 100%"
                      :row-style="{ height: '0' }"
                      :cell-style="{ padding: '3px' }"
                      :header-row-style="{ height: '0' }"
                      :header-cell-style="{ height: '0' }"
                      size="mini"
                    >
                      <el-table-column prop="sort" label="排名" align="center">
                      </el-table-column>
                      <el-table-column
                        prop="userName"
                        :label="userType == 1 ? '学生姓名' : '教师姓名'"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="workNum"
                        :label="userType == 1 ? '学号' : '工号'"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="majorOrPrincipalCount"
                        :label="userType == 1 ? '专业名称' : '主讲课程数'"
                        align="center"
                        show-overflow-tooltip
                      >
                      </el-table-column>
                      <el-table-column
                        prop="classOrAuxiliaryCount"
                        :label="userType == 1 ? '行政班' : '辅助课程数'"
                        align="center"
                        show-overflow-tooltip
                      >
                      </el-table-column>
                      <el-table-column
                        prop="active"
                        label="活跃度"
                        align="center"
                      >
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
    <Lookdetail ref="lookmore"></Lookdetail>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import Lookdetail from '@/views/activeDetail/lookdetail'
import { getHomePageDetail } from '@/api/homePage'
import { formatDate } from '@/utils'

export default {
  components: { Lookdetail },
  name: 'activeUser',
  data() {
    return {
      loading: true,
      open: false,
      title: '活跃学生',
      userType: '',
      endDate: '',
      startDate: '',
      date: '',
      list: []
    }
  },
  computed: {
    pickerOptionsStart() {
      const that = this
      return {
        disabledDate(time) {
          if (that.endDate) {
            const endDate = new Date(that.endDate)
            endDate.setDate(endDate.getDate())
            return time.getTime() > endDate.getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    },
    pickerOptionsEnd() {
      const that = this
      return {
        disabledDate(time) {
          if (!that.startDate) {
            return
          }
          const startDate = new Date(that.startDate)
          startDate.setDate(startDate.getDate() - 1)
          return (
            time.getTime() < startDate.getTime() || time.getTime() > Date.now()
          )
        }
      }
    }
  },
  created() {
    const time = formatDate(new Date())
    this.startDate = time.split(' ')[0]
    this.endDate = time.split(' ')[0]
  },
  mounted() {
  },
  methods: {
    show(userType) {
      this.open = true
      this.userType = userType
      if (userType == 1) {
        this.title = '活跃学生'
      } else if (userType == 2) {
        this.title = '活跃教师'
      }
      this.sendRequest()
    },
    datePickerChange(e, type) {
      this[type] = formatDate(e).split(' ')[0]
      this.sendRequest()
    },
    sendRequest() {
      this.loading = true
      this.startDate = this.startDate ? this.startDate : this.endDate
      this.endDate = this.endDate ? this.endDate : this.startDate
      const params = {
        startDate: this.startDate,
        endDate: this.endDate,
        userType: this.userType
      }

      getHomePageDetail(this.userType, params)
        .then((res) => {
          console.log(res, '/aaaaaaaaa')
          let { code, rows } = res
          if (code == 200) {
            this.list = rows
            this.list.forEach((e, i) => {
              e.activeUserList = e.activeUserList.slice(0, 5)
              this.$nextTick(() => {
                this.setActiveUserOption(
                  this.$refs[`active_${i}`][0],
                  e.activePercent,
                  e.loginPercent
                )
              })
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 活跃学生环形图
    setActiveUserOption(key, activePercent, loginPercent) {
      let bgList = ['rgba(37, 111, 254, 0.2)', 'rgba(4, 211, 180, 0.2)']
      let myCharts = echarts.init(key)
      let option
      let series = []
      let pieDatas = [
        {
          value: loginPercent,
          name: '登录人数'
        },
        {
          value: activePercent,
          name: '活跃人数'
        }
      ]
      let maxRadius = 60,
        barWidth = 12,
        barGap = 10
      // let showValue = true, showPercent = true;
      let barColor = ['#256FFE', '#04D3B4']
      pieDatas.map((item, i) => {
        series.push({
          type: 'pie',
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [
            maxRadius - i * (barGap + barWidth) + '%',
            maxRadius - (i + 1) * barWidth - i * barGap + '%'
          ],
          center: ['25%', '60%'],
          label: {
            show: false
          },
          itemStyle: {
            borderRadius: 100,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [
            {
              value: item.value,
              name: item.name,
              itemStyle: {
                color: barColor[i]
              }
            },
            {
              value: 100 - item.value,
              name: '',
              itemStyle: {
                color: 'transparent'
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
        series.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 0,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [
            maxRadius - i * (barGap + barWidth) + '%',
            maxRadius - (i + 1) * barWidth - i * barGap + '%'
          ],
          center: ['25%', '60%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },
          data: [
            {
              value: 1,
              itemStyle: {
                color: bgList[i]
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
      })
      option = {
        grid: {
          top: '33%',
          bottom: '54%',
          left: '30%',
          containLabel: false
        },
        backgroundColor: 'transparent',
        tooltip: {
          show: false
        },
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              inside: true,
              textStyle: {
                color: '#fff',
                fontSize: 14
              },
              show: false
            },
            data: pieDatas.map((x) => x.value + '%')
          },
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              inside: true,
              textStyle: {
                color: '#fff',
                fontSize: 14
              },
              show: false
            },
            data: pieDatas.map((x) => x.value + '%')
          }
        ],
        legend: {
          show: true,
          right: '13%',
          top: '38%',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 10,
          formatter: function(name) {
            let res = pieDatas.filter((n) => n.name === name)
            return `${name}  ${res[0]?.value}%`
          },
          textStyle: {
            fontSize: 12,
            color: '#999999',
            padding: [0, 0, 0, 8]
          }
        },
        series: series
      }
      option && myCharts.setOption(option)
    },
    lookDetail(branchId) {
      this.$refs.lookmore.show(
        this.userType,
        this.startDate,
        this.endDate,
        branchId
      )
    },
    close() {
      this.list = []
      const time = formatDate(new Date())
      this.startDate = time.split(' ')[0]
      this.endDate = time.split(' ')[0]
      this.open = false
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-main {
  background-color: #e9eef3;
  color: #333;
  /* text-align: center; */
  line-height: 10px !important;
}

.datePicker {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
}

.title {
  /** 文本1 */
  font-size: 14px;
  font-weight: 500;
  line-height: 22.4px;
  color: rgba(51, 51, 51, 1);
}

.box-card {
  width: 100%;
  height: 300px;
  padding-bottom: 10px !important;
  box-sizing: border-box;
  border-radius: 16px;
  margin-bottom: 20px;

  .item_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //margin-bottom: 3px;

    .branch_name {
      font-size: 14px;
      font-weight: 500;
      line-height: 22.4px;
      color: rgba(51, 51, 51, 1);
      display: flex;
      align-items: center;

      span {
        //margin-left: 4px;
        margin-top: 4px;
        cursor: default;
      }
    }

    .active_icon {
      width: 30px;
      height: 30px;
      vertical-align: middle;
    }

    .activeText {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      //line-height: 36px;
      color: rgba(0, 0, 0, 1);
      cursor: default;

      .activeNum {
        font-size: 20px;
        font-weight: 700;
        color: rgba(4, 211, 180, 1);
        //vertical-align: top;
      }
    }
  }

  .item_content {
    display: flex;
    //align-items: center;

    .item_l {
      width: 30%;
      height: 190px;
      position: relative;

      //background: red;
    }

    .item_r {
      width: 70%;

      .tit_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        margin-bottom: 5px;
        cursor: default;

        .lookmore {
          cursor: pointer;
          font-size: 12px;
          font-weight: 400;
          line-height: 19.6px;
          color: rgba(74, 144, 226, 1);
        }
      }
    }
  }
}

.pieChart {
  width: 100%;
  height: 100%;
}

.chartsTip {
  font-size: 12px;
  position: absolute;
  top: 63%;
  left: 52%;
  cursor: default;

  div {
    margin-top: 5px;
  }
}

.contentBox {
  height: 500px;
  overflow: scroll;
}

.branch_Sort {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  cursor: default;
}
</style>
